<template>
	<div class="conference">
		<div class="fixed">
		   	<Header :show="false">群英汇会议</Header>
		   	<div class="content">
		   		<div class="tab" @click="flag='AllConference'">
		   			<span>全部会议</span>
		   		</div>
		        <div class="tab" @click="flag='MyConference'">
					<span>我的会议</span>
		        </div>
		   	</div>
	   	</div>
	   	<div>
		   	<keep-alive>
			    <component :is="flag"></component>
			</keep-alive>
		</div>
	</div>
</template>

<script>
	import Header from './base/Header';
	import AllConference from './AllConference';
	import MyConference from './MyConference';

	/*1.判断浏览器是否发生了滚动2.判断滚动后图标显示或隐藏 3.返回顶部*/
	export default {
		data() {
			return {
     	 		flag:'AllConference'
			}
		},
		components:{
			'AllConference':AllConference,
			'MyConference':MyConference,
			'Header':Header
		}
	}
</script>

<style scoped lang="less">
	.conference{
		padding-top: 40px;
		padding-bottom: 50px;
		.back-top {
		    position: fixed;
		    right: 15px;
		    bottom:100px;
		    img{width: 0.8rem;height: 0.8rem;}
		} 
		.fixed{
			position: fixed;
			top: 0.6rem;
			left: 0;
			z-index: 999;
			width: 100%;
			text-align: center;
		}
		.content{
			padding-top: 0.6rem;
			font-size: 0.5rem;
			background: #f4f4f4;
			width: 100%;
			height: 0.9rem;
			.tab{
				display: inline-block;
				width: calc(50%-12px);
				padding: 5px;
				border-radius: 5px;
				border: 1px solid #000;
				background: #fff;
				text-align: center;
			}
		}
	}

</style>